<template>
	<view class="container padding-lr" :class="{ pad: 1 }">
		<view class="listBox padding-top">
			<view class="listItem minpad">
				<view class="min_qiu fixbox"></view>
				<view class="max_qiu fixbox"></view>
				<view class="mconbox">
					<view class="flex align-center padding-lr">
						<view class="ca_tit flex-sub text-cuts"><text>健康卡</text></view>
						<view class="ca_staut text-ngreen"><text class="acon-logo"></text></view>
					</view>
					<view class="camainMsg text-c6 text-sm padding-lr">
						<view class="">
							面值
							<text class="text-ngreen text-bold text-xxl">1000</text>
							<text class="text-ngreen">元</text>
						</view>
						<view class="ca_dis flex">
							<view class="flex-sub cdtext" :class="{ show: showDis }">
								使用说明：本套餐仅限隆平园店使用使用说明：本套餐仅限隆平园店 使用使用说明：本套餐仅限隆平园店使用
							</view>
							<view class="text-ngreen moredis padding-left-xs" @click="showDis = !showDis" :class="{ show: showDis }">{{ showDis ? '收起' : '查看更多' }}</view>
						</view>
					</view>
					<view class="flex align-center margin-top-sm padding-top-sm padding-lr">
						<view class="flex-sub butips">君临颐而康，如在长寿乡</view>
						<view class="buyBtn">购买</view>
					</view>
				</view>
			</view>
		</view>
		<view class="lrlistbox padding-top-xs">
			<view class="lrItem flex align-center text-c6 solid-top">
				<view class="">购买门店</view>
				<view class="padding-left-xl text-c3">颐而康长沙隆平园店</view>
			</view>
			<view class="lrItem flex align-center text-c6 solid-top solid-bottom">
				<view class="">适用门店</view>
				<view class="padding-left-xl text-c3">颐而康门店通用</view>
			</view>
		</view>
		<view class="textBox">
			<view class="text-c9">1、本卡限在已开通“颐而康”电子卡业务的门店使用。</view>
			<view class="text-c9">2、本卡不记名、不挂失，使用时不核实身份请您妥善保管。</view>
			<view class="text-c9">3、本卡可单独使用，也可对颐而康电子会员卡进行充值，推荐您办理并使用颐而康电子会员卡。</view>
			<view class="text-c9">客服电话: 4008802626</view>
			<view class="text-c9">发行单位: 湖南颐而康保健连锁股份有限公司</view>
		</view>
		<view class="full_btn nfixed">立即购买</view>
		<!-- <view class="comBotSection bgf pad_b48"><view class="full_submit_btn margin-top-sm">查看使用记录</view></view> -->
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	// import { onShow } from '@dcloudio/uni-app';
  const showDis=ref(false)
</script>

<style lang="scss">
.container {
	&.pad {
		padding-bottom: 160rpx;
	}
}
.acon-logo {
	font-size: 60rpx;
}

.listItem {
	width: 100%;
	min-height: 330rpx;
	border-radius: 16rpx;
	background: #f4f7ff;
	position: relative;
	overflow: hidden;
	margin-bottom: 30rpx;
	// &.gry {
	// 	background: #f5f5f5;
	// 	.fixbox {
	// 		background: #eeeeee;
	// 	}
	// 	.ca_staut,
	// 	.ca_tit,
	// 	.camainMsg,
	// 	.moredis,
	// 	.surnums {
	// 		color: #999;
	// 	}
	// }
	&.minpad {
		.camainMsg {
			padding-top: 20rpx;
		}
		.ca_dis {
			margin-top: 6rpx;
		}
	}
	.mconbox {
		padding-top: 40rpx;
		padding-bottom: 30rpx;
		position: relative;
		z-index: 3;
	}
	.min_qiu {
		width: 334rpx;
		height: 334rpx;
		right: -160rpx;
		bottom: -168rpx;
	}
	.max_qiu {
		width: 508rpx;
		height: 508rpx;
		left: -48rpx;
		top: -324rpx;
	}
	.fixbox {
		position: absolute;
		z-index: 1;
		background: rgba(232, 238, 255, 0.7);
		border-radius: 50%;
	}
	.ca_tit {
		font-size: 40rpx;
	}
}
.camainMsg {
	padding-top: 60rpx;
}
.moredis {
	margin-right: 120rpx;
	&.show {
		margin-right: 0;
	}
}
.cdtext {
	overflow: hidden;
	white-space: nowrap;
	&.show {
		overflow: auto;
		white-space: initial;
	}
}
// .actBtn {
// 	@include baseTag(192rpx, 56rpx);
// 	border-radius: 56rpx;
// 	border: 1px solid #56bf7a;
// }
.buyBtn {
	@include baseTag(142rpx, 56rpx);
	border-radius: 56rpx;
	background: #56bf7a;
	color: #fff;
}
.butips {
	color: #bccef4;
	opacity: 0.9;
}
.lrItem {
	height: 90rpx;
	width: 100%;
}
.textBox {
	padding-top: 60rpx;
}
</style>